<template>
    <div class="head-title baojing">
      <el-icon>
        <House />
      </el-icon>
      仓储报警记录
    </div>
    <div class="baojing bianhao">
      编号
      <el-input v-model="pageInfo.warehouseSn" @blur="getSNList()" style="width: 150px" placeholder="请输入仓库编号" />
    </div>
  
    <div class="block baojing time">
      时间
      <el-date-picker style="width: 360px" v-model="timeDate.time" @change="getTimeList()" type="datetimerange"
        start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
        time-format="A hh:mm:ss" />
    </div>
    <el-card>
      <el-table :data="state.tableData" style="width: 100%">
        <el-table-column prop="warehouseSn" label="编号" />
        <el-table-column prop="companyName" label="企业名称" />
        <el-table-column prop="warehouseType" label="库房类型" >
          <template #default="{ row }">
            {{ row.warehouseType == 0?"冷冻仓":"恒温仓" }}
          </template>
          </el-table-column>
  
  
        <el-table-column prop="hostSn" label="主机编号" />
        <el-table-column prop="meterSn" label="仪表编号" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="tem" label="温度" />
        <el-table-column prop="maxTem" label="温度阈值">
          <template #default="{ row }">
            {{ row.minTem }}/{{ row.maxTem }}
          </template>
        </el-table-column>
        <el-table-column prop="temAlert" label="温度报警">
          <template #default="{ row }">
            <span :style="{ color: getColor(row.temAlert) }">
            {{
              row.temAlert === 0
                ? "正常"
                : row.temAlert === 1
                  ? "低温警报"
                  : "高温警报"
            }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="hum" label="湿度" />
        <el-table-column prop="maxHum" label="湿度阈值">
          <template #default="{ row }">
            {{ row.minHum }}/{{ row.maxHum }}
          </template>
        </el-table-column>
        <el-table-column prop="humAlert" label="湿度报警">
          <template #default="{ row }">
            <span :style="{ color: getColor(row.humAlert) }">
              {{
                row.humAlert === 0
                  ? '正常'
                  : row.humAlert === 1
                    ? '低湿警报'
                    : '高湿警报'
              }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  
    <!-- 分页 -->
  
    <el-pagination v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
      :page-sizes="[10, 20, 50, 100]" :size="size" :disabled="disabled" :background="background"
      layout="total, sizes, prev, pager, next, jumper" :total="state.total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </template>
  <script lang="ts" setup>
  import { onMounted, reactive, ref, toRaw } from "vue";
  import { getPage } from "@/api/WarehouseAlarmRecordsView.ts";
  
  // const time = ref([]);
  // console.log(time);
  var timeDate = reactive({
    time: [],
    // startTime:"",
    // endTime:''
  });
  //分页参数信息
  var state = reactive({
    // 表格数据
    tableData: [],
    total: 0,
  });
  var pageInfo = reactive({
    pageNum: 1,
    pageSize: 10,
    startTime: "",
    endTime: "",
    warehouseSn: "",
  });
  const getColor = (humAlert: any) => {
    switch (humAlert) {
      case 0:
        return 'green';
      case 1:
        return 'lightblue';
      default:
        return 'lightcoral';
    }
  };
  
  import type { ComponentSize } from "element-plus";
  import { log } from "console";
  
  const size = ref<ComponentSize>("default");
  const background = ref(false);
  const disabled = ref(false);
  
  const handleSizeChange = (val: number) => {
    pageInfo.pageSize = val;
    getInfo();
  
  };
  
  const handleCurrentChange = (val: number) => {
    pageInfo.pageNum = val;
    getInfo();
  };
  
  // 分页
  async function getInfo() {
    var {
      data: { data },
    } = await getPage(pageInfo);
    // console.log(data);
    state.tableData = data.rows;
    state.total = data.total;
  }
  // 根据时间查询
  async function getTimeList() {
    if (timeDate.time && timeDate.time.length === 2) {
      pageInfo.startTime = timeDate.time[0];
      pageInfo.endTime = timeDate.time[1];
    }
    var {
      data: { data },
    } = await getPage(pageInfo);
    // console.log(data);
    state.tableData = data.rows;
    state.total = data.total;
  }
  // 根据仓库sn查询
  async function getSNList() {
    var {
      data: { data },
    } = await getPage(pageInfo);
    // console.log(data);
    state.tableData = data.rows;
    state.total = data.total;
  }
  
  // 挂载函数
  onMounted(() => {
    getInfo();
  });
  </script>
  <style scoped>
  .head-title {
    margin-top: 10px;
    margin-bottom: 20px;
  }
  
  .baojing {
    display: inline-block;
  }
  
  .bianhao {
    margin-left: 520px;
  }
  
  .time {
    margin-left: 30px;
  }
  </style>